<!-- 正文开始 -->
<div class="site-banner">
    <div class="layui-carousel" id="banner">
        <div carousel-item="">
            <div><img src="http://img.laopifu.top/2021/09/a080542021091411453182445.png"></div>
            <div><img src="http://img.laopifu.top/2021/09/5e46712021091411454245310.png"></div>
            <div><img src="http://img.laopifu.top/2021/09/e890262021091411471640984.png"></div>
        </div>
    </div>
</div>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-container" style="padding-top: 20px">
        <div class="layui-row layui-col-space30" id="contentList"></div>
    </div>
</div>

<!-- 项目模板 -->
<script type="text/html" id="contentItem">
    <div class="layui-col-md3">
        <div class="project-list-item">
            <div>
                <img class="project-list-item-cover" src="{{d.images}}"/>
            </div>
            <div class="project-list-item-body">
                <h2>{{d.cate_name}}</h2>
                <div class="project-list-item-text layui-text">{{d.title}}</div>
                <div class="project-list-item-desc">
                    <span class="time">{{d.create_time}}</span>
                </div>
            </div>
        </div>
    </div>
</script>

<!-- js部分 -->
<script>
    layui.use(['setter', 'util', 'carousel','dataGrid','admin'], function () {
        var $ = layui.jquery;
        var setter = layui.setter;
        var admin = layui.admin;
        var carousel = layui.carousel;
        var dataGrid = layui.dataGrid;
        //图片轮播
        carousel.render({
            elem: '#banner'
            , width: '100%'
            , height: 'inherit'
            , interval: 5000
        });
        // 项目
        admin.req(setter.baseServer + '/index/get_content_list', function (res) {
            dataGrid.render({
                elem: '#contentList',
                templet: '#contentItem',
                data: res.data,
                page: {limit: 8, limits: [8, 16, 24, 32, 40]}
            });
        });

        dataGrid.on('item(contentList)', function (obj) {
            layer.msg('点击了第' + (obj.index + 1) + '个');
        });


    });
</script>
<style>
    .layui-carousel img{
        width: 100%;
        object-fit: cover;
        height: inherit;
    }
    /** 项目列表样式 */
    .project-list-item {
        background-color: #fff;
        border: 1px solid #e8e8e8;
        border-radius: 4px;
        cursor: pointer;
        transition: all .2s;
    }

    .project-list-item:hover {
        box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    }

    .project-list-item .project-list-item-cover {
        width: 100%;
        height: auto;
        display: block;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .project-list-item-body {
        padding:15px;
    }

    .project-list-item .project-list-item-body > h2 {
        font-size: 16px;
        font-weight: bold;
        color: #333;
    }

    .project-list-item .project-list-item-text {
        height: 44px;
        line-height: 22px;
        margin-top: 6px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .project-list-item .project-list-item-desc {
        margin-top: 6px;
        position: relative;
    }

    .project-list-item .project-list-item-desc .time {
        color: #999;
        font-size: 12px;
    }


    @media screen and (min-width: 768px){
        .ew-datagrid-item {
            width: 33.3333333%;
        }
    }
    @media screen and (min-width: 992px){
        .ew-datagrid-item {
            width: 25%;
        }
    }
</style>
